<template>
  <div class="">
    <sec-desc
      :border="false"
      :column="4"
      colon
      title="基础信息"
      :data="baseInfo.data"
      :keyData="baseInfo.cols"
    ></sec-desc>
    <!-- 关联信息 -->
    <div class="relation-infos" v-if="relInfos.upInfosData.length > 0 || relInfos.belowInfosData.length > 0">
      <div class="sec-title">关联信息</div>
      <div class="up-infos" v-if="relInfos.upInfosData.length > 0">
        <div class="sec-er-title">上级信息</div>
        <div class="up-infos_con" v-for="item in relInfos.upInfosData" :key="item.name">
          <span>{{ item.label }}：</span>
          <a @click="redirectGroup(item)">{{ item.name }}</a>
        </div>
      </div>
      <div class="below-infos" v-if="relInfos.belowInfosData.length > 0" style="margin-top: 10px">
        <div class="sec-er-title">下级信息</div>
        <sec-table :tableData="relInfos.belowInfosTableData" :tableCol="relInfos.tableCol"></sec-table>
        <el-button
          size="mini"
          v-if="relInfos.belowInfosData.length > 5"
          @click="belowMoreClick"
          round
          plain
          type="primary"
          class="more"
          >{{ belowText }}</el-button
        >
      </div>
    </div>
    <div class="ownerships">
      <div class="sec-title">权属信息</div>
      <div style="margin-left: 10px">
        <div class="sec-er-title">归属人</div>
        <sec-desc :border="false" :column="3" colon :data="ownerships.data" :keyData="ownerships.cols">
          <template v-slot:leader="{ data }">
            <dc-user :name="data.data.leader"></dc-user>
          </template>
        </sec-desc>
        <div class="sec-er-title">治理人</div>
        <sec-desc :border="false" :column="3" colon :data="ownerships.data" :keyData="ownerships.leaderCols">
          <template v-slot:lastRiskOwner="{ data }">
            <dc-user :name="data.data.lastRiskOwner"></dc-user>
          </template>
        </sec-desc>
      </div>
    </div>
    <!-- 风险信息 -->
    <div class="risk-info">
      <div class="sec-title">风险信息</div>
      <sec-desc class="sec-desc" :data="baseInfo.data" colon :border="false" :keyData="riskInfo.cols"></sec-desc>
      <!-- 敏感信息详情 -->
      <riskAnaSample v-if="displaySample"></riskAnaSample>

      <div class="risk-chart" v-if="showRiskChart">
        <div class="risk-left">
          <sec-statistic
            v-if="riskChart.field.title"
            :title="`${groupLabel}${riskChart.field.title}`"
            :dayPercent="riskInfo.data.dayPercentField"
            :weekPercent="riskInfo.data.weekPercentField"
            :count="riskInfo.data.fieldCount"
          ></sec-statistic>
          <sec-statistic
            v-if="riskChart.pii.title"
            :title="`${groupLabel}${riskChart.pii.title}`"
            :dayPercent="riskInfo.data.dayPercentPii"
            :weekPercent="riskInfo.data.weekPercentPii"
            :count="riskInfo.data.piiCount"
          ></sec-statistic>
          <sec-statistic
            v-if="riskChart.risk.title"
            :title="`${groupLabel}${riskChart.risk.title}`"
            :dayPercent="riskInfo.data.dayPercentRisk"
            :weekPercent="riskInfo.data.weekPercentRisk"
            :count="riskInfo.data.riskCount"
          ></sec-statistic>
        </div>
        <div class="risk-right">
          <LineChart :params="getParams" :groupLabel="groupLabel" />
        </div>
      </div>
      <sec-table :tableData="riskInfo.tableData" :tableCol="riskInfo.tableCol">
        <template v-slot:leader="{ data }">
          <dc-user :name="data.row.leader"></dc-user>
        </template>
      </sec-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        background
        :layout="layout"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :total="totalSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { assetDetailApi, configConditionApi, assetDetailRiskApi, assetDetailNumsApi } from "api/api";
import secStatistic from "./component/secStatistic.vue";
import LineChart from "components/echarts/lineChart.vue";
import { paginationMixin } from "@/mixins/pagination";
import riskAnaSample from "@/components/apiAnaSamples/riskAnaSample.vue";
//下级信息的label
let enumBelowLabel = { db: "表名", table: "字段名", index: "字段名", domain: "url" };
export default {
  name: "assetCenterDetail",
  props: {},
  mixins: [paginationMixin],
  components: { secStatistic, LineChart, riskAnaSample },
  data() {
    return {
      displaySample: false,
      groupLabel: "",
      baseInfo: { data: {}, cols: [] },
      //关联信息
      relInfos: {
        upInfosData: [], //上级信息 原始数据

        belowInfosData: [], //下级信息 原始数据
        belowInfosTableData: [],
        tableCol: [
          { label: "资产id", prop: "id" },
          { label: enumBelowLabel[this.$route.params.group], prop: "name" },
          {
            label: "是否涉及个人信息",
            prop: "hasPii",
            formatter: (data) => {
              return this.utils.getDictLabel("hasPii", data.hasPii);
            },
          },
          {
            type: "operation",
            label: "操作",
            width: 80,
            children: [
              {
                label: "详情",
                click: ({ row }) => {
                  this.redirectGroup(row);
                },
              },
            ],
          },
        ],
      },

      //权属信息
      ownerships: {
        data: {},
        cols: [
          { type: "slot", label: "归属人", prop: "leader" },
          { label: "业务线", prop: "businessLineName" },
          { label: "一级部门", prop: "dept0" },
          { label: "二级部门", prop: "dept1" },
          { label: "三级部门", prop: "dept2" },
          { label: "四级部门", prop: "dept3" },
        ],
        leaderCols: [
          { type: "slot", label: "最近治理人", prop: "lastRiskOwner" },
          // { label: "业务线", prop: "" },
          { label: "一级部门", prop: "dept0Last" },
          { label: "二级部门", prop: "dept1Last" },
          { label: "三级部门", prop: "dept2Last" },
          { label: "四级部门", prop: "dept3Last" },
        ],
      },
      riskInfo: {
        cols: [
          {
            label: "是否涉及个人信息",
            prop: "hasPii",
            formatter: (data) => {
              return this.utils.getDictLabel("hasPii", data.hasPii);
            },
          },
        ],
        data: {},
        tableData: [],
        tableCol: [
          { label: "风险ID", prop: "id" },
          { label: "风险类型", prop: "riskType" },
          { label: "风险分类", prop: "riskClass" },
          { label: "风险状态", prop: "statusName" },
          { label: "暴露时间", prop: "exposeTime" },
          { label: "暴露方式", prop: "exposeType" },
          { label: "风险更新时间", prop: "modifyTime" },
          { type: "slot", label: "治理人", prop: "leader" },
          {
            type: "operation",
            label: "操作",
            width: 80,
            children: [
              {
                label: "详情",
                click: ({ row }) => {
                  console.log("[ row ] >", row);
                  this.utils.$router(
                    {
                      path: `/govern/${row.type}/${row.source}`,
                      query: { uniqueId: row.uniqId },
                    },
                    "_blank",
                  );
                },
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    belowText() {
      return this.relInfos.belowInfosTableData.length > 5 ? "收起" : "查看更多";
    },
  },
  created() {
    this.initPage();
    this.setGroupLable();
  },
  mounted() {},
  methods: {
    setGroupLable() {
      let { source, group } = this.getParams();
      let asset = this.$store.state.dictionary["asset"];
      this.groupLabel = asset?.[source]?.[group]?.label || "";
      this.showRiskChart = asset?.[source]?.[group]?.showRiskChart;
      this.riskChart = asset?.[source]?.[group]?.riskChart;
    },
    initPage() {
      this.initConfigCondition(); //基础信息表头
      this.getDetail();
      this.initTableData(); //风险信息表格
      this.assetDetailNums(); //风险 日环比和周同比
    },
    getParams() {
      let { params, query } = this.$route;
      let { type, source, group } = params;
      let { uniqId } = query;
      return { type, source, group, uniqId };
    },
    redirectGroup(item) {
      this.utils.$router(
        {
          path: `/asset/${item.type}/${item.source}/${item.group}`,
          query: { uniqId: item.uniqId || item.id },
        },
        "_blank",
      );
    },
    belowMoreClick() {
      let { belowInfosData, belowInfosTableData } = this.relInfos;
      this.relInfos.belowInfosTableData = belowInfosTableData.length > 5 ? belowInfosData.slice(0, 5) : belowInfosData;
    },
    initConfigCondition() {
      let { params } = this.$route;
      let { source, group } = params;
      configConditionApi({ type: source, source: group }).then((res) => {
        let data = res.data;
        //createFlag：1 是详情的列
        this.baseInfo.cols = data.filter((item) => item.createFlag === "1") || [];
      });
    },
    getDetail() {
      let loading = this.openLoading();
      assetDetailApi(this.getParams()).then((res) => {
        console.log(res);
        loading.close();
        let data = res.data;
        let { belowInfos, upInfos, ownership, detail } = data;
        this.relInfos.upInfosData = upInfos;
        this.relInfos.belowInfosData = belowInfos;
        this.relInfos.belowInfosTableData = belowInfos.slice(0, 5);
        this.ownerships.data = ownership || {};
        this.baseInfo.data = detail;
        this.displaySample = detail.displaySample;
      });
    },
    assetDetailNums() {
      assetDetailNumsApi(this.getParams()).then((res) => {
        this.riskInfo.data = res.data;
      });
    },
    initTableData() {
      assetDetailRiskApi({ ...this.getParams(), pageSize: this.pageSize, pageNum: this.page }).then((res) => {
        console.log("[ res ] >", res);
        let { data, count } = res;
        this.riskInfo.tableData = data;
        this.totalSize = count;
      });
    },

    // 页码变更
    handleCurrentChange(val) {
      this.page = val;
      this.initTableData();
    },
    // 条数变更
    handleSizeChange(val) {
      this.pageSize = val;
      this.initTableData();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类

.sec-desc.el-descriptions {
  margin-bottom: 0px !important;
}
.below-infos,
.up-infos {
  position: relative;
  padding-left: 10px;
  .more {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    bottom: 0;
    z-index: 100;
  }
}
.up-infos_con {
  span {
    color: #333;
    font-weight: 600;
    line-height: 25px;
    font-size: 12px;
  }
  a {
    color: $color;
  }
}
.risk-chart {
  display: flex;
  min-height: 100px;
  .risk-left {
    width: 300px;
    // background: pink;
  }
  .risk-right {
    flex: 1;
    padding-left: 20px;
  }
}
.el-statistic {
  text-align: left;
  ::v-deep .con {
    justify-content: start;
  }
}
</style>
